{:W('Cate/header')}
{:W('Cate/left')}
<!--内容部分-->
<div class="content">
    <div class="title">
        <p>用户管理</p>
        <i class="icon-angle-right"></i>
        <p class="active">用户组织</p>
    </div>
    <div class="user_group clearfix">
        <div class="left_nav">
            <div class="title">
                <span><img src="__PUBLIC__/images/i_biaoti.png"></span><i style="width: 90px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;">{$companyname}</i>
            </div>
            <div class="list">
                <ul class="active"></ul>
            </div>
        </div>
        <div class="right_list">
            <div class="title clearfix">
                <span id="company_name">{$companyname}</span><img id="add_bj" style="cursor: pointer;display: none;" src="__PUBLIC__/images/xiugai.png">
                <p><img src="__PUBLIC__/images/i_xiaji.png">下级组织</p>
            </div>
            <div class="add_zz">
                <button id="add_group"><img src="__PUBLIC__/images/add_j.png" class="icon-remove">添加子组织</button>
            </div>
            <div class="add_text">
                <ul></ul>
            </div>
            <div class="add_zz delete_cy">
                <img src="__PUBLIC__/images/i_yonghu.png">成员
            </div>
            <div class="add_zz delete_li">
                <button id="all_delete"><img src="__PUBLIC__/images/i_sc.png">批量删除</button>
            </div>
            <div class="add_list">
                <dl>
                    <dt>
                        <span style="width:16%;"><input type="checkbox" name="vehicle1" value="" style="float:left;" />账号</span>
                        <span style="width:18%;">用户名</span>
                        <span style="width:16%;">手机</span>
                        <span style="width:18%;">邮箱</span>
                        <span style="width:16%;">授权资源</span>
                        <span style="width:16%;">是否在线</span>
                    </dt>
                </dl>
                <div class="fy" id="page" style="margin-top:30px;"></div>
            </div>
        </div>
    </div>
</div>

<!--弹框-->
<!--添加子组织-->
<div class="hk"></div>
<div class="add_group">
    <div class="add_group_title">
        <img src="__PUBLIC__/images/i_guanbi.png" class="icon-remove">新增组织
    </div>
    <div class="add_group_center">
        <ul>
            <li>
                <span><i>*</i>组织名称 :</span>
                <input value="" name="add_department" maxlength="20" type="text">
            </li>
        </ul>
    </div>
    <div class="add_group_btn">
        <button>确定</button>
        <button>取消</button>
    </div>
</div>
<!--编辑组织-->
<div class="add_group_two">
    <div class="add_group_title">
        <img src="__PUBLIC__/images/i_guanbi.png" class="icon-remove">编辑组织
    </div>
    <div class="add_group_center">
        <ul>
            <li>
                <span><i>*</i>组织名称 :</span>
                <input value="" name="edit_department" maxlength="20" type="text">
            </li>
        </ul>
    </div>
    <div class="add_group_btn">
        <button>确定</button>
        <button>取消</button>
    </div>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function () {
        // 初始化一级菜单
        get_class(0);

        // 点击菜单加载子菜单，显示右侧数据
        _depid = 0;   // 点击的部门id，全局
        $('.list ul').on('click','.list_btn',function(){
            _depid = $(this).parent('li').attr('data-departments');
            var _depName = $(this).text();
            get_class(_depid,_depName);  // 获取子菜单
            get_user(_depid);   // 获取当前分组下的用户
            if($('#add_bj').is(':hidden')){
                $('#add_bj').show();
            }
        })

        // 点击右侧菜单
        $('.add_text ul').on('click','li',function(){
            _depid = $(this).attr('data-departments');
            var _depName = $(this).text();
            get_class(_depid,_depName.split('(')[0]);  // 获取子菜单
            get_user(_depid);   // 获取当前分组下的用户
            if($('#add_bj').is(':hidden')){
                $('#add_bj').show();
            }
        })

        //右侧内容宽度
        var rWidth = $('.content').width() - 212;
        $('.right_list').width(rWidth);
        //左侧高度
        $('.left_nav').height($('.right_list').outerHeight());
        $('.list').height($('.right_list').outerHeight()-42);

        //全选
        selectCheckBox('input[name="vehicle1"]','input[name="vehicle"]');

        //添加子组织
        getPopup($('#add_group'),$('.add_group'));
        //编辑
        getPopup($('#add_bj'),$('.add_group_two'));

        // 增加子组织
        $('.add_group button').eq(0).on('click',function(){
            var _department = $('input[name="add_department"]').val();
            if(!_department){
                layer.msg('请填写组织名称',{icon:2,time:2000});
                return;
            }
            $.post("{:U('user_group/addOrganization_post')}",{'parentid':_depid,'departmentname':_department},function(data){
                if(data.result == '0'){
                    layer.msg('新增组织成功',{icon:1,time:2000},function(){
                        if(_depid == '0'){   // 一级菜单
                            var _lParent = '<li data-departments="'+data.departmentid+'"><span class="list_btn"><i class=" icon-caret-right"></i>'+_department+'</span></li>';
                            $('.list .active').append(_lParent);
                        } else {
                            var _lChild = '<li data-departments="'+data.departmentid+'"><span class="list_btn"><i class=" icon-caret-right"></i>'+_department+'</span></li>';
                            $('li[data-departments="'+_depid+'"] ul').append(_lChild);  // 左侧菜单
                            var _rChild = '<li data-departments="'+data.departmentid+'"><i class="icon-angle-right"></i>'+_department+'(0)</li>';
                            $('.add_text ul').append(_rChild);   // 右侧菜单
                        }
                        close();   // 关闭弹窗
                    })
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        })

        // 获取编辑的基本信息
        $('#add_bj').on('click',function(){
            var _title1 = $('#company_name').text();
            var _title2 = _title1.substring(_title1.lastIndexOf('>')+1);
            $('input[name="edit_department"]').val(_title2);
        })

        // 编辑组织
        $('.add_group_two button').eq(0).on('click',function(){
            var _department = $('input[name="edit_department"]').val();
            if(!_department){
                layer.msg('请填写组织名称',{icon:2,time:2000});
                return;
            }
            $.post("{:U('user_group/modifyOrganization_post')}",{'departmentid':_depid,'departmentname':_department},function(data){
                if(data.result == '0'){
                    layer.msg('编辑组织成功',{icon:1,time:2000});
                    var _title1 = $('#company_name').text();
                    _title2 = _title1.substring(_title1.lastIndexOf('>'));
                    _title3 = _title1.split(_title2)[0]+'>'+_department;
                    $('#company_name').text(_title3);  // 右侧菜单
                    $('li[data-departments="'+_depid+'"]').find("span").eq(0).html('<i class="icon-caret-right"></i>'+_department);  // 左侧菜单
                    // 关闭弹窗
                    close();
                } else {
                    layer.msg(data.msg,{icon:2,time:2000});
                }
            })
        })

        // 批量删除用户
        $('#all_delete').on('click',function(){
            // 获取选中的用户
            var _checkbox = $('input[name="vehicle"]:checked');
            if(!_checkbox.length){
                layer.msg('请选择要删除的用户',{icon:2,time:2000});
                return;
            }
            var ids = '';
            _checkbox.each(function(i){
                ids += _checkbox.eq(i).val()+',';
            })
            layer.confirm('<font style="color: red;">*</font> 确认要删除用户吗！',function(index){
                $.post("{:U('user_group/undoOrganizationUser')}",{accountiddst:ids,departmentid:_depid},function(data){
                    // js清除删除成功的数据节点
                    var _succ = data.ids;
                    for(var i in _succ){
                        $("input[value='"+_succ[i]+"']").parents('dd').remove();
                    }
                    var _length = $('.add_list dd').length;
                    // 左侧高度随右侧高度增加
                    $('.left_nav').height($('.right_list').outerHeight());
                    $('.list').height($('.right_list').outerHeight()-42);
                    if(data.result == '0'){
                        layer.msg(data.msg,{icon:1,time:2000},function(){
                            var _layui_input = $('.layui-laypage-skip .layui-input');
                            if(!_length && _layui_input.val() > 1){   // 获取上一页
                                _layui_input.val(_layui_input.val()-1);
                            }
                            $('#page .layui-laypage-btn').click();
                        });
                    } else {
                        layer.msg(data.msg,{icon:2,time:2000});
                    }
                })
            })
        });
    });

    /*
     * 获取用户组分类
     * @param string|int obj 上级分类id，默认0
     * @param string|int text 分类名称
     **/
    function get_class(obj,text)
    {
        $.get("{:U('user_group/user_group_json')}",{parentid:obj},function(data){
            if(data.result != '0'){
                layer.msg(data.msg,{icon:2,time:2000});
                return false;
            }
            // 遍历分类
            var _parent = $('.list ul.active');
            var _child = $('li[data-departments="'+obj+'"]');
            var _right = $('.add_text ul');   // 右侧子菜单
            var _companyName = "<?php echo $companyname; ?>";
            if(obj == '0'){
                _parent.empty();
            } else {   // 菜单收展效果
                $('span.list_btn').removeAttr('style');   // 清楚所有背景颜色
                _child.find('span').attr('style','background:#f1f1f1;');   // 给一个灰色的背景代表选中（颜色暂定）
                _child.find('ul').remove();
                _right.empty();
                var _style = '';  // 默认菜单展开
                if($.trim(_child.find('i').eq(0).attr('class')) == 'icon-caret-down'){
                    _child.find('i').eq(0).attr('class','icon-caret-right');
                    _style = 'display:none;';
                } else {
                    // 当前分类展开的时候，同级分类收缩并清除菜单下面的数据
                    _child.parent().find('i').attr('class','icon-caret-right');
                    _child.parent().find('ul').remove();
                    _child.find('i').eq(0).attr('class','icon-caret-down');
                    _style = 'display:block;';
                }
                _child.append('<ul style="'+_style+'"></ul>');
                // 获取该菜单的所有上级菜单名
                var _rParents = _parent.find('.icon-caret-down');
                var _parentName = '';
                _rParents.each(function(){
                    if($(this).parent('span').text()){
                        _parentName += '>'+$(this).parent('span').text();
                    }
                })
                if($('li[data-departments="'+obj+'"]').find('.icon-caret-right').length){   // 点击自身收起
                    _parentName += '>'+text;
                }
                var _text = _companyName+_parentName;
                $('#company_name').text(_text);  // 面包屑
            }
            for(var i in data.departments){
                if(obj == '0'){   // 一级菜单
                    var _parentLi = '<li data-departments="'+data.departments[i]['departmentid']+'"><span class="list_btn"><i class=" icon-caret-right"></i>'+data.departments[i]['departmentname']+'</span></li>';
                    _parent.append(_parentLi)
                } else {   // 子级菜单
                    var _childLi = '<li data-departments="'+data.departments[i]['departmentid']+'"><span class="list_btn"><i class=" icon-caret-right"></i>'+data.departments[i]['departmentname']+'</span></li>';
                    _child.find('ul').append(_childLi);
                    // 右侧菜单显示子组织
                    var _rightLi = '<li data-departments="'+data.departments[i]['departmentid']+'"><i class="icon-angle-right"></i>'+data.departments[i]['departmentname']+'('+data.departments[i]['usernum']+')</li>';
                    _right.append(_rightLi);
                }
            }
            return true;
        })
    }

    /*
     * 获取用户分组下面的用户
     * @param string|int id 分组id
     * @param json对象 conf 主要是为了分页的时候实现无刷新传送的分页参数 例：{pageid:1,pagecount:10}
     **/
    function get_user(id,conf)
    {
        $('.add_list dd').remove();
        if(!conf){
            var conf = {departmentid:id,pageid:1,pagecount:10};
        } else {
            conf['departmentid'] = id;
        }
        // 获取菜单下面的所有成员
        $.post("{:U('user_group/UserList_post')}",conf,function(data){
            if(data.result != '0'){
                layer.msg(data.msg,{icon:2,time:2000});
                return;
            }
            if(data.accounts != null){
                for(var i in data.accounts){
                    var _online = '在线';
                    var _class = 'zx';
                    if(data.accounts[i]['online'] == '0'){
                        var _online = '不在线';
                        var _class = 'lx';
                    }
                    var _dd = '<dd>' +
                            '<span style="width:16%;"><input type="checkbox" name="vehicle" value="'+data.accounts[i]['id']+'" />'+data.accounts[i]['username']+'</span>' +
                            '<span style="width:18%;">'+data.accounts[i]['markname']+'</span>' +
                            '<span style="width:16%;">'+data.accounts[i]['tel']+'</span>' +
                            '<span style="width:18%;">'+data.accounts[i]['email']+'</span>' +
                            '<span style="width:16%;">'+data.accounts[i]['resnum']+'</span>' +
                            '<span style="width:16%;"><i class="icon-circle '+_class+'"></i>'+_online+'</span>' +
                            '</dd>';
                    $('.add_list dl').append(_dd);
                }
                layui.use('laypage', function(){
                    var laypage = layui.laypage;
                    //执行一个laypage实例
                    laypage.render({
                        elem: 'page'
                        ,count: data.page['totnum']
                        ,limit: data.page['pagecount']
                        ,layout: ['prev', 'page', 'next', 'limit', 'skip']
                        ,curr: data.page['pageid']
                        ,jump: function(obj,first){  //点击页码出发的事件
                            if(first!=true){  //是否首次进入页面
                                var conf = {pageid:obj.curr,pagecount:obj.limit};
                                get_user(id,conf);
                            }
                        }
                    });
                });
            }
            // 左侧高度随右侧高度增加
            $('.left_nav').height($('.right_list').outerHeight());
            $('.list').height($('.right_list').outerHeight()-42);
        });
    }
</script>
</html>